<template>
  <radio :value="props.name"
         class="van-radio"
         color="var(--color)"
         :disabled="disabled"
         :checked="props.name === value"
         :aria-checked="props.name === value">
    <view>
      <slot></slot>
    </view>
  </radio>
</template>

<script setup>
import {inject, watch, ref} from 'vue'
const props = defineProps({
  name: {
    type: [Number, String],
    default: 0
  }
})
// console.log(`=>(van-radio.vue:17) props`, props);

const radioGroup = inject('radioGroup', {value: '', disabled: false})
const value = ref(radioGroup.value)
const disabled = ref(radioGroup.disabled)
watch(()=>radioGroup.value, (val)=>{
  value.value = val
})
watch(()=>radioGroup.disabled, (val)=>{
  disabled.value = val
})

</script>

<style lang="scss" scoped></style>